<template>
	<view class="min-h-[100vh] bg-background">
		<!-- <view>
			<up-swiper :list="[banner, banner, banner]" height="160rpx" indicatorActiveColor="#8C4F3D" indicatorInactiveColor="#C39A71" indicator indicatorMode="dot"></up-swiper>
		</view> -->
		<view class="p-[16rpx]">
			<!-- <view class="mt-[16rpx]">
				<GoodsScroll :list="groupDetail.groupGoodList" @goodsClick="toGroupByDetail"></GoodsScroll>
			</view> -->
			<view class="bg-white rounded-[16rpx]">
				<view class="p-[20rpx] font-bold">团购更优惠</view>
				<GoodsScroll :list="groupDetail.groupGoodList" @goodsClick="toGroupByDetail"></GoodsScroll>
			</view>
			<!-- <view class="bg-white rounded-[16rpx] mt-[16rpx]">
				<view class="p-[20rpx] flex items-center justify-between">
					<view class="text-black font-bold text-[30rpx]">邀请中，待好友加入</view>
					<view class="flex items-center text-gray leading-none text-[22rpx]">
						<up-icon name="error-circle" color="#999" size="13"></up-icon>
						<view class="ml-[4rpx]">规则</view>
					</view>
				</view>
				<view class="py-[40rpx] mt-[30rpx]">
					<view class="invite">邀请好友</view>
				</view>
			</view> -->
			<view class="">
				<view class="p-[20rpx] flex items-center justify-between bg-white rounded-[16rpx] mt-[16rpx]">
					<view class="flex items-center">
						<up-image :src="$setBaseUrl(userInfo.avatar)" width="64rpx" height="64rpx" shape="circle"></up-image>
						<view class="ml-[20rpx] text-[26rpx]">{{ userInfo.nickName }}（我）</view>
					</view>
					<view class="">
						<!-- <view class="text-[22rpx] text-gray text-right">下单中</view> -->
						<view class="order" @click="toCheckOut">立即下单</view>
					</view>
				</view>
			</view>
			<view class="bg-white mt-[20rpx] rounded-[16rpx] overflow-hidden">
				<view class="p-[24rpx] font-bold">用户下单</view>
				<view class="p-[20rpx] flex items-center justify-between bg-white" v-for="item in buyer" :key="$u.guid()">
					<view class="flex items-center">
						<up-image :src="$setBaseUrl(item.avatar)" width="64rpx" height="64rpx" shape="circle"></up-image>
						<view class="ml-[20rpx] text-[26rpx]">{{ item.nickName }}</view>
					</view>
					<view class="">
						<view class="text-[22rpx] text-gray text-right">已下单</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getGoodsDetailByGroup, getGoodsGroupBuyer } from '@/config/api/goods';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
const groupDetail = ref({});
const buyer = ref([]);
const params = reactive({
	pageNum: 1,
	pageSize: 10,
	total: 0
});
const userInfo = ref({});
onLoad(() => {
	getGoodsDetailGroup();
	getGroupBuyer();
	userInfo.value = uni.getStorageSync('userInfo');
});
onReachBottom(() => {
	if (buyer.value.length < params.total) {
		params.pageNum++;
		getGroupBuyer();
	}
});
const getGoodsDetailGroup = async () => {
	try {
		const res = await getGoodsDetailByGroup();
		if (res.code == 200) {
			groupDetail.value = res.data;
		}
	} catch (error) {
		//TODO handle the exception
	}
};
const getGroupBuyer = async () => {
	try {
		const res = await getGoodsGroupBuyer(params);
		if (res.code == 200) {
			buyer.value = buyer.value.concat(res.data);
			params.total = res.total;
		}
	} catch (error) {
		//TODO handle the exception
	}
};
const toGroupByDetail = (item) => {
	// uni.navigateTo({
	// 	url: '/pages/groupBuyDetail/groupBuyDetail'
	// });
	uni.navigateTo({
		url: `/pages/drinkDetail/drinkDetail?id=${item.goodId}`
	});
};
const toCheckOut = () => {
	uni.navigateTo({
		url: `/pages/checkoutByGroup/checkoutByGroup?groupId=${groupDetail.value.id}`
	});
};
</script>

<style lang="scss" scoped>
.invite {
	@apply mx-auto text-[28rpx] text-white bg-second w-[344rpx] h-[76rpx] rounded-full flex items-center justify-center;
}
.order {
	@apply text-[26rpx] w-[144rpx] h-[56rpx] rounded-full text-second border border-second flex items-center justify-center;
}
</style>
